<template>
	<view class="swiper-frame">
		<uv-swiper 	:list="swiperList" 
					:current="current" 
					height="903rpx" 
					indicator 
					circular
					@change="change"
					>
			<template v-slot:indicator>
				<view class="indicator">
					<view 	class="indicator-item" 
							v-for="(item, index) in swiperList" 
							:key="index"
							@click="current = index"
							:class="{'indicator-item-active': index === current}"
							></view>
				</view>
			</template>
		</uv-swiper>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					'https://crazy3.top/images/avatar/狂三.png',
					'https://crazy3.top/images/avatar/狂三.png',
					'https://crazy3.top/images/avatar/狂三.png',
				],
				current: 0,
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indicator {
		display: flex;
		height: 35px;
		.indicator-item {
			height: 2px;
			width: 100rpx;
			border-radius: 999px;
			margin: 0 5px;
			background-color: #ffffff99;
		}
		.indicator-item-active {
			background-color: #fff;
		}
	}
</style>